<template>
  <div>
    <el-alert
      title="提示" :closable="false"
      type="info"
      description="修改完重新登录后即可刷新"
      show-icon>
    </el-alert>
    <el-form ref="form" :model="userInfo" :rules="rules">
      <el-form-item label="姓名" prop="nickname">
        <el-input v-model.trim="userInfo.nickname" />
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model.trim="userInfo.email" />
      </el-form-item>
      <el-form-item label="头像链接" prop="avatar">
        <el-input v-model.trim="userInfo.avatar" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model.trim="userInfo.phone" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model.trim="userInfo.remark" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit('form')">修改</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<script>
import {updateSelfInfo} from '@/api/system/tUser'

export default {
  computed:{
    userInfo() {
      return this.$store.getters.user;
    }
  },
  data(){
   return{
     rules:{
       nickname:[{required:true}],
       phone:[{required:true,pattern:/^1[3|4|5|7|8][0-9]{9}$/,message:'必须手机格式'}],
       email:[{type:'email',message:'邮箱格式'}]
     }
   }
  },
  watch:{

  },
  methods: {
    submit(ref) {
      this.$refs[ref].validate(valid =>{
        if(valid){
          updateSelfInfo(this.userInfo).then(res=>{
            this.$message({
              type:'success',
              message:res.message
            })
          })
        }
      })

    }
  }
}
</script>
